<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
    <style>
        .flex-container {
            display: flex;
            justify-content: space-between; /* 水平间隔 */
        }
        .flex-item {
            margin: 5px; /* 设置元素之间的间隔为5px */
        }

        table {
            border-collapse: separate;
            border-spacing: 0; /* 移除表格单元格之间的默认间隔 */
        }
        td {
            padding: 5px; /* 设置单元格内间隔 */
            border: 1px solid black; /* 为单元格添加边框，以便看到内间隔效果 */
        }
    </style>
    <meta charset="UTF-8">
    <title>技师列表页面</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <div class="row">
        <table class="table table-hover">
            <thead>
            <div class="flex-container">
                <tr class="success">
                    <!--                <th><input type="checkbox" name="ids" th:value="${item.id}"/>全选</th>-->
                    <th>编号</th>
                    <th>头像</th>
                    <th>名字</th>
                    <th>接单数量</th>
                    <th>实名认证资质认证</th>
                    <th>简介</th>
                    <th>距离</th>
                </tr>

            </div>
            </thead>
            数据显示
<!--            <tr th:each="item:${pageData.records}">-->
<!--                &lt;!&ndash;                <td><input type="checkbox" name="ids" th:value="${address.id}" ></td>&ndash;&gt;-->
<!--                <td th:text="${item.id}" th:id="${item.id}"></td>-->
<!--                <td th:text="${item.image}"></td>-->
<!--                <td th:text="${item.name}"></td>-->
<!--                <td th:text="${item.quantity}"></td>-->
<!--                <td th:text="${item.qualification}"></td>-->
<!--                <td th:text="${item.introduce}"></td>-->
<!--                <td th:text="${item.distance}"></td>-->
<!--                &lt;!&ndash; 删除按钮，使用提交表单的方式 &ndash;&gt;-->
<!--                <td><a th:href="@{/teacher/getTeacherById/{id}(id=${item.id})}">立即下单</a></td>-->
<!--                &lt;!&ndash;                <td>&ndash;&gt;-->
<!--                &lt;!&ndash;                    <button th:id="${address.id}" th:onclick="deletePlayer(this.getAttribute('id'))">删除</button>&ndash;&gt;-->
<!--                &lt;!&ndash;                </td>&ndash;&gt;-->
<!--            </tr>-->

            <tr th:each="teacher:${list}">
<!--                <td><input type="checkbox" name="ids" th:value="${address.id}" ></td>-->
                <td th:text="${teacher.tid}" th:id="${teacher.tid}"></td>
                <td th:text="${teacher.image}"></td>
                <td th:text="${teacher.name}"></td>
                <td th:text="${teacher.quantity}"></td>
                <td th:text="${teacher.qualification}"></td>
                <td th:text="${teacher.introduce}"></td>
                <td th:text="${teacher.distance}"></td>
                <!-- 删除按钮，使用提交表单的方式 -->
                <td><a th:href="@{/teacher/getTeacherById/{tid}(tid=${teacher.tid})}">立即下单</a></td>
<!--                <td>-->
<!--                    <button th:id="${address.id}" th:onclick="deletePlayer(this.getAttribute('id'))">删除</button>-->
<!--                </td>-->
            </tr>
        </table>
    </div>
</head>